<template>
    <el-dialog v-model="show" title="新增收款卡" width="20%" align-center @close="handleClose">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm"
            status-icon>
            <el-form-item label="收款卡名称:" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入收款卡名称" />
            </el-form-item>
            <el-form-item label="收款卡类型:" prop="receivePaymentType">
                <el-select style="width: 100%;" v-model="ruleForm.receivePaymentType" placeholder="请选择收款卡类型">
                    <el-option v-for="dick in reveive_card_type" :key="dick.value" :label="dick.label"
                        :value="dick.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="所属子公司:" prop="companyId">
                <el-select style="width: 100%;" v-model="ruleForm.companyId" placeholder="请选择所属子公司">
                    <el-option v-for="item in props.initList" :key="item.id" :label="item.companyName"
                        :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="收款卡余额:" prop="balance">
                <el-input v-model="ruleForm.balance" placeholder="请输入收款卡余额" />
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" v-loading="loading" @click="handleSubmit(ruleFormRef)">创 建</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { addPaymentCardApi } from '@/api/sj/financialManagement/paymentCard/index'


import type { FormInstance, FormRules } from 'element-plus'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList']);
const emits = defineEmits(['submit', 'close']);
const { reveive_card_type } = toRefs<any>(proxy?.useDict('reveive_card_type'));


interface RuleForm {
    name: string
    receivePaymentType: string
    companyId: number | null
    balance: number | null
};
const ruleFormRef = ref<FormInstance>();
const loading = ref(false);
const ruleForm = reactive<RuleForm>({
    name: '',
    receivePaymentType: '',
    companyId: null,
    balance: null
});

const rules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入收款卡名称', trigger: 'blur' },
    ],
    receivePaymentType: [
        {
            required: true,
            message: '请选择收款卡类型',
            trigger: ['blur', 'change'],
        },
    ],
    companyId: [
        {
            required: true,
            message: '请选择所属子公司',
            trigger: ['blur', 'change'],
        },
    ],
    balance: [
        { required: true, message: '请输入收款卡余额', trigger: 'blur' },
    ],
})

const show = ref(false);

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });

const handleSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            loading.value = true;
            try {
                addPaymentCardApi(ruleForm).then((result) => {
                    proxy?.$modal.msgSuccess('操作成功');
                    loading.value = false;
                    emits('submit', true);

                    handleClose();
                });
            } catch (error) {
                loading.value = false;
            }

        } else {
            console.log('error submit!', fields)
        }
    })
}


const handleClose = () => {
    ruleFormRef.value?.resetFields();
    emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped></style>